<?php
include 'functions.php';
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function resizeTextarea (id) {
  var a = document.getElementById(id);
  a.style.height = 'auto';
  a.style.height = a.scrollHeight+'px';
}

function init() {
  var a = document.getElementsByTagName('textarea');
  for(var i=0,inb=a.length;i<inb;i++) {
     if(a[i].getAttribute('data-resizable')=='true')
      resizeTextarea(a[i].id);
  }
}
addEventListener('DOMContentLoaded', init);
</script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      reflection
    </title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
  </head>
  <body>
    <header>
    </header>
     
      <form id="wholeForm" action="reflectionPost.php" method="post" class="nl-form">
        <div id="dynamicForm1" class="nl-form hidden">
        <select><?php $getGReflection = getGReflection(1,1);?></select> 
         <select><?php $getGReflection = getGReflection(1,2);?></select>
  <textarea id="dynamicForm1_text" rows="1" placeholder="is" class="nl-form" onkeyup="resizeTextarea('dynamicForm1_text')"  data-resizable="true"></textarea>
      </div>
      
      <div id="dynamicForm2" class="nl-form hidden">
       <select><?php $getGReflection = getGReflection(2,1);?></select> 
      <select><?php $getGReflection = getGReflection(2,2);?></select> 
      <textarea id="dynamicForm2_text" rows="1" placeholder="type here" class="nl-form" onkeyup="resizeTextarea('dynamicForm2_text')"  data-resizable="true"></textarea>
      </div>
      
      <div id="dynamicForm3" class="nl-form hidden">
      <select><?php $getGReflection = getGReflection(3,1);?></select> 
  <select><?php $getGReflection = getGReflection(3,2);?></select> 
       <select><?php $getGReflection = getGReflection(3,3);?></select> 
       <textarea id="dynamicForm3_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('dynamicForm3_text')"  data-resizable="true"></textarea>
 
        </div>
      
      <div id="outcomeForm1" class="nl-form outcome hidden">
        <select><?php $getGOutcome = getGOutcome(1,1); ?></select>
        <textarea id="outcomeForm1_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm1_text')"  data-resizable="true"></textarea>
	<select><?php $getGOutcome = getGOutcome(1,2); ?></select>
	<textarea id="outcomeForm1_text2" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm1_text2')"  data-resizable="true"></textarea>
    </div>
    
    <div id="outcomeForm2" class="nl-form outcome hidden">
      <select><?php $getGOutcome = getGOutcome(2,1); ?></select>
      <select><?php $getGOutcome = getGOutcome(2,2); ?></select>
<textarea id="outcomeForm2_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm2_text')"  data-resizable="true"></textarea>
    </div>
   
    <div id="outcomeForm3" class="nl-form outcome hidden">
      <select><?php $getGOutcome = getGOutcome(3,1); ?></select>
     <textarea id="outcomeForm3_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm3_text')"  data-resizable="true"></textarea>
      <select><?php $getGOutcome = getGOutcome(3,2); ?></select>
       <textarea id="outcomeForm4_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm4_text')"  data-resizable="true"></textarea>
    </div>


 <div class="nl-submit-wrap">
    <button class="nl-submit" type="submit" id="wfs">
      Save
    </button>
  </div> 
   <div class="nl-overlay">  </div> 
        </form>
    
  <input onclick="toggleHelp(this.value,this.id)" type="button" value="Hide help" id="helpReflect" />
  <input onclick="spinHelp()" type="button" value="spin ref" id="spinHelp" />
  <input onclick="spinHelpOutcome()" type="button" value="spin outcome" id="spinHelpOutcome" />
  <input onclick="refresher()" type="button" value="refresher" id="refresher" />
  <footer>
  </footer>
  <script src="js/nlform.js">
  </script>
  
  <script>
    var nlform = new NLForm(document.getElementById('wholeForm'));
// 
    // var nlform7 = new NLForm(document.getElementById('dynamicForm1'));
    // var nlform8 = new NLForm(document.getElementById('dynamicForm2'));
    // var nlform9 = new NLForm(document.getElementById('dynamicForm3'));
    // var nlform10 = new NLForm(document.getElementById('outcomeForm1'));
    // var nlform11 = new NLForm(document.getElementById('outcomeForm2'));
    // var nlform12 = new NLForm(document.getElementById('outcomeForm3'));
  </script>
  <script type="text/javascript">
    
	
          // get the start of the form name so a random number can be appended
          var formname = "dynamicForm";
          var outcomeForm = "outcomeForm";
          
          //choose a random number between 1 and 5	
          var randNo1 = Math.floor((Math.random() * 3) + 1);
          var randNo2 = Math.floor((Math.random() * 3) + 1);
          
          //make the full form name
          //var chosenform = formname.concat(formno); 
          var chosenform = formname.concat(randNo1);
          var chosenOutcomeForm = outcomeForm.concat(randNo2);
          
          
          //show me
          window.alert(chosenOutcomeForm)
          window.alert(chosenform) 
          //set the visbility of the chosen form to visible
          document.getElementById(chosenform).className = "nl-form visible";
          document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";
     
		var x = document.getElementById(chosenform);
		var y = x.getElementsByTagName("*");
		var i;
		for (i = 0; i < y.length; i++) {
		    y[i].setAttribute("name","formData[]");
		}
       
		var x1 = document.getElementById(chosenOutcomeForm);
		var y1 = x1.getElementsByTagName("*");
		var i;
		for (i = 0; i < y1.length; i++) {
		    y1[i].setAttribute("name","formData[]");
		}       
     
          function toggleHelp(myVal,btId) {
            
            if (myVal=="Hide help")
            {
              
              document.getElementById(chosenform).className = "nl-form hidden";
              document.getElementById(chosenOutcomeForm).className = "nl-form outcome hidden";
              document.getElementById(btId).value = "Show help";             
            }
            
            else  {
              var current = document.getElementById(chosenform).className= "nl-form visible";
              document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";
              document.getElementById(btId).value = "Hide help";
          }
          }
          
          function spinHelp() {
            
            var x = document.getElementsByClassName("nl-form visible");
            var i;
            for (i = 0; i < x.length; i++) {
              x[i].setAttribute("class","nl-form hidden") ;
            }
                        
            var formname = "dynamicForm";
            var randNo1 = Math.floor((Math.random() * 3) + 1);
            var nextform = formname.concat(randNo1);
            
            //alert(nextform)
            //set the visbility of the chosen form to visible
            document.getElementById(nextform).className = "nl-form visible";
            }
          
          function spinHelpOutcome() {
            
            var x = document.getElementsByClassName("nl-form outcome visible");
            var i;
            for (i = 0; i < x.length; i++) {
              x[i].setAttribute("class","nl-form outcome hidden") ;
            }
            
            var outcomeForm = "outcomeForm";
            var randNo2 = Math.floor((Math.random() * 3) + 1);
            var nextformOutcome = outcomeForm.concat(randNo2);
            
            //alert(nextform)
            //set the visbility of the chosen form to visible
            document.getElementById(nextformOutcome).className = "nl-form outcome visible";
            //location.reload();
          }
          
           function refresher() {
           location.reload();
          }
          
  </script>
</body>
</html>